<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!-- 引入jstl 标签库 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- 引入jsp格式化标签 -->
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<title>我的订单</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"	href="${ctx}/plugin/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="${ctx}/css/tooltip.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="${ctx}/resource/plugin/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="${ctx}/resource/plugin/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="${ctx }/resource/js/order.js"></script>		
</head>

<body>
<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<div class="page-header">
					<h1>
						B2C网上商城 <small>Online Shopping Mall</small>
					</h1>
				</div>
				<ul class="nav nav-pills">
					<li class="active"><a href="${ctx }/index.do">首页</a></li>
					<li>
						<a href="${ctx }/pages/back/cart/list.action">购物车						
								<c:set var="sum" value="0"></c:set>
								<c:forEach var="item" items="${cart.items }" varStatus="status">
								 		<c:set var="sum" value="${sum+item.value.amount}"></c:set>						    	
								</c:forEach>				
								<c:if test="${sum == 0 }">
									<span class="glyphicon glyphicon-shopping-cart" id="cart" style="color: rgb(255, 140, 60);"></span>
								</c:if>
								<c:if test="${sum > 0 }">
									<span class="glyphicon glyphicon-shopping-cart"  id="cart" style="color: rgb(255, 140, 60);">${sum}</span>
								</c:if>
						</a>
					</li>
					<li>
							<a href="${ctx }/findUser.do?id=${user.id}" title="${user.name}">用户信息</a>
					</li>
					<li class="pull-right">
						<c:if test="${user == null }">
							<a href="${ctx }/view/login.jsp">登 录</a>
						</c:if> 
						<c:if test="${user != null }">
								欢迎你，${user.name } 
								 <button type="button" class="btn btn-danger btn-sm"
								onclick="logout()">退出</button>
						</c:if></li>
				</ul>
			</div>
		</div>
		<hr>
		<div class="row clearfix">
			<div class="col-md-2 column">
				<div class="list-group">
					<a href="#" class="list-group-item active">商品分类</a>
					<c:forEach items="${categorys}" var="category">
						<div class="list-group-item">
							<a href="${ctx }/indexCategory.do?id=${category.id}"
								title="${ category.description }">${ category.name }</a>
						</div>
					</c:forEach>
				</div>
			</div>
			<div class="col-md-10 column">
				<ul class="breadcrumb">
					<li><a href="${ctx }/index.do">首页</a></li>
					<li class="active">${user.name}的订单</li>
				</ul>
				<table
					class="table  table-responsive-sm table-hover table-condensed  table-striped ">
					<thead>
						<tr>
							<th>序号</th>
							<th>ID</th>
							<th>日期</th>
							<th>金额</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach var="item" items="${page.datas}" varStatus="status">
							<tr>		
								<td>${status.index + 1 }</td>
								<td>${item.id }</td>
								<td>
									<fmt:formatDate type="both" 
								            dateStyle="medium" timeStyle="medium" 
								            value="${item.orderdate}" />		
								</td>
								<td>${item.cost }</td>
								<td>
									<c:if test="${item.status == 0}">
										<p class="text-primary" data-toggle="tooltip"
											title="您可以进行'付款'操作；如果您不想买了，也可以'取消'关闭交易">等待买家付款</p>
									</c:if> 
									<c:if test="${item.status == 1}">
										<p class="text-info" data-toggle="tooltip"
											title="交易正在确认中，可能因为第三方故障，请您耐心等待...">付款确认中</p>
									</c:if> 
									<c:if test="${item.status == 2}">
										<p class="text-primary" data-toggle="tooltip"
											title="您可以提醒卖家及时发货；若卖家迟迟未发货，付款24小时后，您可以'申请退款'">买家已付款，等待卖家发货</p>
									</c:if> 
									<c:if test="${item.status == 3}">
										<p class="text-info" data-toggle="tooltip"
											title="货品已发出，请关注物流信息；如长时间未收到货，您可以'申请退款'">卖家已发货，等待买家确认</p>
									</c:if> 
									<c:if test="${item.status == 4}">
										<p class="text-success" data-toggle="tooltip"
											title="交易成功后，您购买的宝贝如果还有问题，您可以'投诉卖家'">交易成功</p>
									</c:if> 
									<c:if test="${item.status == 5}">
										<p class="text-muted">交易关闭</p>
									</c:if> 
									<c:if test="${item.status == 6}">
										<p class="text-danger " data-toggle="tooltip"
											title="如已发起退款，您可以通过'买家申诉'上传相关原始凭证进行维权，或联系客服协商处理">退款中的订单</p>
									</c:if>
								</td>
								<td>
									<!--等待买家付款 --> 
									<c:if test="${item.status == 0}">
										<!-- 调用第三方支付接口，完成支付，并返回支付状态码,并有短信通知到卖家 -->
										<a href="${ctx }/buyerPayment.do?id=${item.id }"
											class="btn btn-primary btn-xs">付款</a>
										<!-- 未支付，如果您不想买了，也可以取消关闭交易 -->
										<a href="${ctx }/cancelOrder.do?id=${item.id }"
											class="text-muted"  title="取消后将关闭本笔交易">取消</a>
									</c:if> 
									<c:if test="${item.status == 1}">
										<a href="#" class="text-muted"  title="联系交易平台">联系交易平台</a>
									</c:if>
									<c:if test="${item.status == 2}">
										<!-- 买家已付款 -->
										<a href="#" class="btn btn-info btn-xs">提醒发货</a>
										<!-- 未收到货(物流问题或卖家原因未发货)，款自动打回买家帐户 -->
										<a href="#" class="btn btn-danger btn-xs"
											data-toggle="tooltip" title="未收到货，货款会在7个工作日内自动打回买家帐户">申请退款</a>
									</c:if> 
									<c:if test="${item.status == 3}">
										<!-- 卖家已发货 -->
										<a href="${ctx }/buyersignIn.do?id=${item.id }"
											class="btn btn-primary btn-xs">收货确认</a>
										<a href="#" class="btn btn-danger btn-xs">申请退款</a>
										<!-- 收到货不满意发出退货、换货或退款 -->
										<a href="#" class="btn btn-link">查看物流</a>
										<a href="#" class="btn btn-link">申请售后</a>
									</c:if> 
									<c:if test="${item.status == 4}">
										<!-- 交易成功 -->
										<a href="#" class="text-warning">投诉卖家</a>
										<a href="#" class="btn btn-link">开票申请</a>
										<a href="#" class="btn btn-link">我要安装</a>
										<a href="#" class="btn btn-link">追加评价</a>
									</c:if> 
									<c:if test="${item.status == 5}">
										<!--交易关闭 -->
										<!-- 服务器端自动标识24小时后，客户端才可以删，事务执行将订单和清单转入订单回收站 -->
										<a href="${ctx }/deleteOrder.do?id=${item.id }" 	class="text-muted">删除</a>
									</c:if> 
									<c:if test="${item.status == 6}">
										<!-- 退款中的订单 -->
										<a href="#" class="btn btn-warning btn-xs">买家申诉</a>
									</c:if> 
									<!-- Ajax异步请求，返回数据用弹出层展示 -->
									<a href="#" onclick="showOrderItem(${item.id })" class="btn btn-link"
									title="查看已买宝贝">订单详情</a>
									
									 <!-- 模态框（Modal） -->
									<div class="modal fade" id="myModal" tabindex="-1"
										role="dialog" aria-labelledby="myModalLabel"
										aria-hidden="true"  >
										<div class="modal-dialog"  style="width:650px">
											<div class="modal-content">
												<div class="modal-header">
													<!-- 关闭按钮 -->
													<button type="button" class="close" data-dismiss="modal"
														aria-hidden="true">&times;</button>
													<h5 class="modal-title" id="myModalLabel">订单清单</h5>
												</div>
												<div class="modal-body" >
													<table class='table  table-hover table-condensed  table-striped'  id="itemContent">
														<thead>
															<tr>
																<th>序号</th>
																<th>商品名称</th>
																<th>图片</th>
																<th>单价</th>
																<th>数量</th>
																<th>合计</th>
															</tr>
														</thead>
														<tbody>
															<!-- 清单内容通过解析ajax返回json数据展示  -->
														</tbody>													
													</table>
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-default"
														data-dismiss="modal">关闭</button>
												</div>
											</div>
											<!-- /.modal-content -->
										</div>
										<!-- /.modal -->
									</div>
								
								</td>
							</tr>
						</c:forEach>
						<tr>
							<td colspan="6" style="text-align: center"><font color='red'>${errors}</font>
							</td>
						</tr>
					</tbody>
				</table>
				<div class="center-block" style="width:320px">
					<!-- 分页开始 -->
					<c:if test="${page.total >0 }">
						<script type="text/javascript">
							function gotoSelectedPage() {
								var x = document.getElementById("navigatorForm");
								x.submit();
							}
						</script>
						<form action="${ctx }/userlistOrder.do?userId=${user.id}"
							method="post" id="navigatorForm">						
								<ul class="pagination">
									<li><a
										href="${ctx }/userlistOrder.do?pageNumber=1&userId=${user.id}">首页</a></li>
									<c:if test="${page.currentCount >1 }">
										<li><a
											href="${ctx }/userlistOrder.do?pageNumber=${page.currentCount-1}&userId=${user.id}">上一页</a></li>
									</c:if>
									<li>Go <select name="pageNumber"
										style="width: 34px; height: 34px; text-align: middle; border-radius: 5px;"
										onchange="gotoSelectedPage();">
											<c:forEach begin="1" end="${page.total}" step="1"
												var="pageIndex">
												<c:choose>
													<c:when test="${pageIndex eq page.currentCount}">
														<option value="${pageIndex}" selected="selected">${pageIndex}</option>
													</c:when>
													<c:otherwise>
														<option value="${pageIndex}">${pageIndex}</option>
													</c:otherwise>
												</c:choose>
											</c:forEach>
									</select>页
									</li>
									<c:if test="${page.currentCount < page.total}">
										<li><a
											href="${ctx }/userlistOrder.do?pageNumber=${page.currentCount + 1}&userId=${user.id}">下一页</a></li>
									</c:if>
									<li><a
										href="${ctx }/userlistOrder.do?pageNumber=${page.total}&userId=${user.id}">末页</a></li>
								</ul>							
						</form>
					</c:if>
					<!-- 分页结束 -->
				</div>
			</div>
		</div>
</div>
</body>
</html>